<template>
  <div class="">
    <div>
      <div>
        <span>审核级别</span>
        <el-input v-model.number="num"></el-input>
      </div>

      <div v-for="item of choice" :key="item.id">
        <span>第{{ item + 1 }}级审核角色</span>
        <el-select
          v-model="value[item]"
          placeholder="请选择"
          @change="select(value[item])"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          >
          </el-option>
        </el-select>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  methods: {
    select(name) {
      // this.data.name=name
      this.total.push({ name: name });
      // console.log(Object.prototype.toString.call(this.form));
      // console.log(this.total);

      for (let i = 0; i < this.total.length; i++) {
        for (let y = 0; y < this.options.length; y++) {
          if (this.total[i].name == this.options[y].label) {
            console.log(y + "已选择得选项" + this.option[y].label);
            console.log("选择删除后得选择器");
            console.log(this.options);
            console.log(this.options.splice(y, 1));
            // this.options= this.option.splice(y);
          }
        }
      }
    },
  },
  computed: {},
  props: [],
  computed: {},
  mounted() {
    this.options = this.option;
  },
  watch: {
    num(a, b) {
      if (a == "") {
        this.choice = [0];
      } else if (a > 2) {
        alert("超出选择范围");
      } else if (a > b) {
        for (let i = 0; i <= a - 1; i++) {
          this.choice[i] = i;
          // console.log(this.choice);
        }
      } else if (a < b) {
        console.log("重新赋值");
        this.options = this.option;
        // this.choice.splice(a, b - a);
      }
    },
  },
  data() {
    return {
      form: {
        name: "",
      },
      num: "",
      choice: [0],
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
      ],
      option: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
      ],
      value: [],
      data: { id: "", name: "", title: "" },
      total: [],
    };
  },
};
</script>

<style lang="scss" scoped>
.el-form {
  width: 400px;
  align-items: center;
  padding-left: 500px;
}

.el-input {
  width: 220px;
}
</style>